module MC.View {
  export class ZhiweiDiv {
    public constructor(fun: Function = null) {
      this.init(fun);
    }

    private init(fun: Function) {
      this.Load((data: any) => {
        //  console.log(data);
        fun && fun();
      });
    }

    public close = true;
    private data: any = null;

    private Load(Fun: Function) {
      if (this.data) {
        Fun(this.data);
        return;
      }
      MC.apiD('/api/home/job_list', {}, (data: any) => {
        this.data = data;
        Fun(data);
      });
    }

    /** 返回选择的值 */
    public selectVal(selectValfun: Function) {
      if (!this.data) {
        return;
      }
      let zhiweiDiv = $(`

			<div class="zhiweiDiv clearfix">
				<h2 class="titleh2">选择部门和职位</h2>
				<a class="close">关闭</a>
				<div class="scontentdiv clearfix">
                    <ul class="menuUl clearfix"></ul>
                    <ul class="erjiUl clearfix"></ul>
				</div>
				<div class="buttonDiv clearfix"><button type="button" 
					style=" display: block"
				class=" mui-btn mui-btn-primary btn_queding">确定</button>
				<button class="mui-btn btn_quxiao">取消</button>
				
				</div>
			</div>
				`);
      for (let i = 0; i < this.data.length; i++) {
        let li = this.data[i];
        let menu = $(`<li class="menuli" key_id="` + i + `">` + li.position.name + `</li>`);
        zhiweiDiv.find('.menuUl').append(menu);
      }
      let mthis = this;
      zhiweiDiv.find('.menuUl .menuli').click(function () {
        let key_id = $(this).attr('key_id');
        zhiweiDiv.find('.menuUl .menuli').removeClass('on');
        $(this).addClass('on');
        let erjidata = mthis.data[key_id].position.job;
        $('.zhiweiDiv .erjiUl').html('');
        for (let i = 0; i < erjidata.length; i++) {
          let li = erjidata[i];
          $('.zhiweiDiv .erjiUl').append(`
					<li class="erjili" d_id="` + li.id + `">` + li.name + `</li>
					`);
        }
      });
      zhiweiDiv.on('click', '.erjiUl .erjili', function () {
        zhiweiDiv.find('.erjiUl .erjili').removeClass('on');
        let one = $(this);
        let id = one.attr('d_id');
        let name = one.text();
        one.addClass('on');
        ///	console.log(id,name);
      });

      $('body').append(zhiweiDiv);
      zhiweiDiv.find('.menuUl .menuli')[0].click();
      zhiweiDiv.find('.buttonDiv .btn_queding').click(() => {
        let menu = zhiweiDiv.find('.menuUl .menuli.on');
        let erji = zhiweiDiv.find('.erjiUl .erjili.on');
        if (!erji[0]) {
          MC.msg.alert('请选择职位');
          return;
        }
        let data = {
          menu: menu.text(),
          erji: erji.text(),
          id: erji.attr('d_id')
        };
        zhiweiDiv.remove();
        selectValfun(data);
      });
      zhiweiDiv.find('.close,.btn_quxiao').click(() => {
        zhiweiDiv.remove();
      });
      if (!this.close) {
        zhiweiDiv.find('.close,.btn_quxiao').hide();
      }

    }

  }
}

/** <div class="zhiweiDiv clearfix">
 <ul class="menuUl clearfix">
 <li class="menuli" d_id="2">总经办</li>
 <li class="menuli" d_id="2">总经办</li>
 <li class="menuli" d_id="2">总经办</li>
 <li class="menuli on" d_id="2">总经办</li>
 <li class="menuli" d_id="2">总经办</li>
 </ul>
 <ul class="erjiUl clearfix">
 <li class="erjili" d_id="22">子内容</li>
 <li class="erjili" d_id="22">子内容</li>
 <li class="erjili" d_id="22">子内容</li>
 <li class="erjili on" d_id="22">子内容</li>
 <li class="erjili" d_id="22">子内容</li>
 <li class="erjili" d_id="22">子内容</li>
 <li class="erjili" d_id="22">子内容</li>
 <li class="erjili" d_id="22">子内容</li>
 </ul>
 </div> */